<!DOCTYPE html>
<html lang="en" style="width: 99vw">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.min.js"></script>
    <script src="/elementUI/index.js"></script>
    <link rel="stylesheet" href="/elementUI/index.css">
    <script src="/js/axios.min.js"></script>
        <style type="text/css">
            body {
                scroll: "no";
                scroll: "auto";
                overflow-x: hidden;
                overflow-y: hidden;
            }

            html {
                scroll: "no";
                scroll: "auto";
                overflow-x: hidden;
                overflow-y: hidden;
            }
        </style>


</head>

<body scroll="no">
<div id="app">
    <el-row :gutter="20">
        <el-breadcrumb style="font-size: 30px;margin-left: 10px">
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
    </el-row>
    <el-divider></el-divider>
    <div style="width:300px;display: inline-block">
        <el-row>
            <el-select v-model="key" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-input placeholder="请输入内容" v-model="value" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="selectLike"></el-button>
            </el-input>
        </el-row>

    </div>
    &nbsp;


    <br><br>

    <el-row :gutter="20">
        <el-table ref="multipleTable" :data="tableData">
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="orderNum" label="订单编号">
            </el-table-column>
            <el-table-column prop="product.productName" label="产品名称">
            </el-table-column>
            <el-table-column prop="product.productPrice" label="金额">
            </el-table-column>
            <el-table-column prop="orderTimeStr" label="下单时间">
            </el-table-column>
            <el-table-column prop="orderStatusStr" label="订单状态">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" icon="el-icon-eyes" title="查看详情">查看详情
                    </el-button>
                </template>
            </el-table-column>
            </template>
        </el-table>
        <div class="block" style="width: 100vw;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage" :page-sizes="[3,5,10, 20, 30, 40]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="count" style="width: 100%;">
            </el-pagination>
        </div>
    </el-row>


    <el-dialog title="订单详情" :visible.sync="dialogDescVisible">


        <el-descriptions title="会员信息">
            <el-descriptions-item label="会员">
                <el-tag size="small">{{memberData.nickName}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系人">
                <el-tag size="small">{{memberData.name}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                <el-tag size="small">{{memberData.phoneNum}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
                <el-tag size="small">{{memberData.email}}</el-tag>
            </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>

        <el-descriptions title="订单信息">
            <el-descriptions-item label="订单编号">
                <el-tag size="small">{{descData.orderNum}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="下单时间">
                <el-tag size="small">{{descData.orderTimeStr}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="路线名称">
                <el-tag size="small"> {{productData.productName}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="出发城市">
                <el-tag size="small">{{productData.cityName}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="出发时间">
                <el-tag size="small">{{productData.departureTimeStr}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="出游人数">
                <el-tag size="small">{{descData.peopleCount}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="订单描述">
                <el-tag size="small">{{descData.orderDesc}}</el-tag>
            </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <h3>旅客信息</h3>

        <el-table
                :data="travellerData"
                style="width:100%">
            <el-table-column
                    prop="travellerTypeStr"
                    label="人群">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>


            <el-table-column
                    prop="sex"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="phoneNum"
                    label="手机号码">
            </el-table-column>
            <el-table-column
                    prop="credentialsTypeStr"
                    label="证件类型">
            </el-table-column>
            <el-table-column
                    prop="credentialsNum"
                    label="证件号码">
            </el-table-column>
        </el-table>


    </el-dialog>
</div>
</body>
<script>
    var v1 = new Vue({
        el: "#app",
        data: {
            tableData: [{id:1
            }],
            descData: {},
            productData: {},
            memberData: {},
            travellerData: [],
            productName: "",
            count: 0,
            currentPage: 1,
            pageSize: 3,
            key: "orderNum",
            value: "",
            dialogDescVisible: false,
            options: [
                {label: "订单编号", value: "orderNum"},
                {label: "产品名称", value: "productName"}
            ]
        },
        methods: {
            // 切换分页调用方法
            handleSizeChange(val) {
                //获取切换后的分页数val 
                //切换分页后应该从第一页开始查询
                // 向后台发送请求获取新的数据
                this.currentPage = 1;
                this.pageSize = val;

                console.log({
                    "当前页码": this.currentPage,
                    "当前分页数": this.pageSize
                });
                getData('/orders/json', {page: this.currentPage, limit: this.pageSize, key: v1.key, value: v1.value});
            },
            // 当跳转指定页面时调用的方法
            handleCurrentChange(val) {
                //获取跳转的页码val
                //获取当前分页数this.pageSize
                // 向后台发送请求获取新的数据
                this.currentPage = val;
                console.log({
                    "当前页码": this.currentPage,
                    "当前分页数": this.pageSize
                });
                getData('/orders/json', {page: this.currentPage, limit: this.pageSize, key: v1.key, value: v1.value});
            },
            handleClick(row) {
                //console.log("查看详情");
                v1.dialogDescVisible = true;
                axios({
                    // 请求方式
                    method: 'get',
                    url: "/orders/show",
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: {id: row.id},
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.descData = res;
                    v1.productData = res.product;
                    v1.memberData = res.member;
                    v1.travellerData = res.travellers;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });

            },
            selectLike() {
                getData('/orders/json', {key: v1.key, value: v1.value});
            }
        }
    })

    function getData(url, obj) {
        axios({
            // 请求方式
            method: 'get',
            url: url,
            // 传递参数 data使用流发送数据 params台servlet可以直接获取
            params: obj,
            //响应的数据格式 默认就是json 可以省略
            responseType: 'json'
        }).then(response => {
            // 请求成功
            let res = response.data;
            console.log(res);
            v1.tableData = res.list;
            v1.count = res.total;

        }).catch(error => {
            // 请求失败，
            console.log(error);
            // 一般不用
        });
    }

    window.onload = function () {
        getData('/orders/json', {});
    }
</script>

</html>